﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Viva商城</title>
    <!--    引入meta及样式-->
    <th:block th:insert="~{front/include::head}"></th:block>
</head>
<script th:inline="javascript">
    const goods=/*[[${goods}]]*/[];
</script>

<body>
<!--引入快速一览-->
<div th:replace="~{front/include::quickView}"></div>
<!--引入页面头部导航栏-->
<header th:replace="~{front/include::header}"></header>
<main class="main">
    <section class="home-slider position-relative pt-50">
        <!--        第一层商品展示-->
        <div class="hero-slider-1 dot-style-1 dot-style-1-position-1">
            <div class="single-hero-slider single-animation-wrap">
                <div class="container">
                    <div class="row align-items-center slider-animated-1">
                        <div class="col-lg-5 col-md-6">
                            <div class="hero-slider-content-2">
                                <h4 class="animated">Trade-in offer</h4>
                                <h2 class="animated fw-900">Supper value deals</h2>
                                <h1 class="animated fw-900 text-brand">On all products</h1>
                                <p class="animated">Save more with coupons & up to 70% off</p>
                                <a class="animated btn btn-brush btn-brush-3" th:href="@{/vm/front/goods/detail?goodsId=1}"> Shop
                                    Now </a>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-6">
                            <div class="single-slider-img single-slider-img-1">
                                <img class="animated slider-1-1" th:src="@{/assets/front/imgs/slider/slider-1.png}"
                                     alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-hero-slider single-animation-wrap">
                <div class="container">
                    <div class="row align-items-center slider-animated-1">
                        <div class="col-lg-5 col-md-6">
                            <div class="hero-slider-content-2">
                                <h4 class="animated">Hot promotions</h4>
                                <h2 class="animated fw-900">Fashion Trending</h2>
                                <h1 class="animated fw-900 text-7">Great Collection</h1>
                                <p class="animated">Save more with coupons & up to 20% off</p>
                                <a class="animated btn btn-brush btn-brush-2" th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    Discover
                                    Now </a>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-6">
                            <div class="single-slider-img single-slider-img-1">
                                <img class="animated slider-1-2" th:src="@{/assets/front/imgs/slider/slider-2.png}"
                                     alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-hero-slider single-animation-wrap">
                <div class="container">
                    <div class="row align-items-center slider-animated-1">
                        <div class="col-lg-5 col-md-6">
                            <div class="hero-slider-content-2">
                                <h4 class="animated">Upcoming Offer</h4>
                                <h2 class="animated fw-900">Big Deals From</h2>
                                <h1 class="animated fw-900 text-8">Manufacturer</h1>
                                <p class="animated">Clothing, Shoes, Bags, Wallets...</p>
                                <a class="animated btn btn-brush btn-brush-1" th:href="@{/vm/front/goods/detail?goodsId=1}"> Shop
                                    Now </a>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-6">
                            <div class="single-slider-img single-slider-img-1">
                                <img class="animated slider-1-3" th:src="@{/assets/front/imgs/slider/slider-3.png}"
                                     alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slider-arrow hero-slider-1-arrow"></div>
    </section>
    <section class="featured section-padding position-relative">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-1.png}" alt="">
                        <h4 class="bg-1">Free Shipping</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-2.png}" alt="">
                        <h4 class="bg-3">Online Order</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-3.png}" alt="">
                        <h4 class="bg-2">Save Money</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-4.png}" alt="">
                        <h4 class="bg-4">Promotions</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-5.png}" alt="">
                        <h4 class="bg-5">Happy Sell</h4>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-md-3 mb-lg-0">
                    <div class="banner-features wow fadeIn animated hover-up">
                        <img th:src="@{/assets/front/imgs/theme/icons/feature-6.png}" alt="">
                        <h4 class="bg-6">24/7 Support</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--    第二层popular和new等-->
    <section class="product-tabs section-padding position-relative wow fadeIn animated">
        <div class="bg-square"></div>
        <div class="container">
            <div class="tab-header">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="nav-tab-one" data-bs-toggle="tab" data-bs-target="#tab-one"
                                type="button" role="tab" aria-controls="tab-one" aria-selected="true">Featured
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="nav-tab-two" data-bs-toggle="tab" data-bs-target="#tab-two"
                                type="button" role="tab" aria-controls="tab-two" aria-selected="false">Popular
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="nav-tab-three" data-bs-toggle="tab" data-bs-target="#tab-three"
                                type="button" role="tab" aria-controls="tab-three" aria-selected="false">New added
                        </button>
                    </li>
                </ul>
                <a th:href="@{/vm/front/goods/grid}" class="view-more d-none d-md-flex">查看更多
                    <i class="fi-rs-angle-double-small-right"></i></a>
            </div>
            <!--End nav-tabs-->
            <!--商品列表-->
            <div class="tab-content wow fadeIn animated" id="myTabContent">
                <div class="tab-pane fade show active" id="tab-one" role="tabpanel" aria-labelledby="tab-one">
                    <!--En tab one (Featured) 特色-->
                    <div class="row product-grid-4">
                        <div class="col-lg-3 col-md-4 col-12 col-sm-6" th:each="goodsA : ${goods.subList(0,8)}">
                            <div class="product-cart-wrap mb-30">
                                <div class="product-img-action-wrap">
                                    <div class="product-img product-img-zoom">
                                        <a th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">
                                            <img class="default-img" th:src="@{/assets/{url}(url=${goodsA.pic})}"
                                                 alt="主图">
                                            <img class="hover-img" th:src="@{/assets/{url}(url=${goodsA.pic1})}"
                                                 alt="副图">
                                        </a>
                                    </div>
                                    <!--                                    快速一览-->
                                    <div class="product-action-1">
                                        <a aria-label="快速一览" th:data-goods-id="${goodsA.id}"
                                           class="action-btn hover-up quick-view-btn">
                                            <i class="fi-rs-eye"></i>
                                        </a>
                                        <a aria-label="添加到收藏" class="action-btn hover-up add-to-wi"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-heart"></i>
                                        </a>
                                        <a aria-label="查看同类" class="action-btn hover-up"
                                           th:href="@{/vm/front/goods/compare(catId=${goodsA.categoryId})}">
                                            <i class="fi-rs-shuffle"></i>
                                        </a>
                                    </div>
                                    <div class="product-badges product-badges-position product-badges-mrg">
                                        <span class="best">Best Sell</span>
                                    </div>
                                </div>
                                <div class="product-content-wrap">
                                    <div class="product-category">
                                        <a th:text="${goodsA.category.name}"
                                           th:href="@{/vm/front/goods/grid}">Clothing</a>
                                    </div>
                                    <h2><a th:text="${goodsA.name}"
                                           th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">Colorful Shirts</a>
                                    </h2>
                                    <div class="rating-result" title="90%">
                                            <span>
                                                <span>90%</span>
                                            </span>
                                    </div>
                                    <div class="product-price">
                                        <span th:text="'$'+${goodsA.markPrice}">$238.85 </span>
                                        <span th:text="'$'+${goodsA.price}" class="old-price">$245.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="添加到购物车" class="action-btn hover-up add-to-cart"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-shopping-bag-add"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--En tab two (Popular) 流行-->
                <div class="tab-pane fade" id="tab-two" role="tabpanel" aria-labelledby="tab-two">
                    <div class="row product-grid-4">
                        <div class="col-lg-3 col-md-4 col-12 col-sm-6" th:each="goodsA : ${goods.subList(2,10)}">
                            <div class="product-cart-wrap mb-30">
                                <div class="product-img-action-wrap">
                                    <div class="product-img product-img-zoom">
                                        <a th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">
                                            <img class="default-img" th:src="@{/assets/{url}(url=${goodsA.pic})}"
                                                 alt="主图">
                                            <img class="hover-img" th:src="@{/assets/{url}(url=${goodsA.pic1})}"
                                                 alt="副图">
                                        </a>
                                    </div>
                                    <!--                                    quick view-->
                                    <div class="product-action-1">
                                        <a aria-label="快速一览" class="action-btn hover-up quick-view-btn"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-eye"></i>
                                        </a>
                                        <a aria-label="添加到收藏" class="action-btn hover-up add-to-wi"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-heart"></i>
                                        </a>
                                        <a aria-label="查看同类" class="action-btn hover-up"
                                           th:href="@{/vm/front/goods/compare(catId=${goodsA.categoryId})}">
                                            <i class="fi-rs-shuffle"></i>
                                        </a>
                                    </div>
                                    <div class="product-badges product-badges-position product-badges-mrg">
                                        <span class="hot">Hot</span>
                                    </div>
                                </div>
                                <div class="product-content-wrap">
                                    <div class="product-category">
                                        <a th:text="${goodsA.category==null?'':goodsA.category.name}"
                                           th:href="@{/vm/front/goods/grid(id=${goodsA.categoryId})}">Clothing</a>
                                    </div>
                                    <h2><a th:text="${goodsA.name}"
                                           th:href="@{/vm/front/goods/detail(id=${goodsA.id})}">Colorful Shirts</a>
                                    </h2>
                                    <div class="rating-result" title="90%">
                                            <span>
                                                <span>90%</span>
                                            </span>
                                    </div>
                                    <div class="product-price">
                                        <span th:text="'$'+${goodsA.markPrice}">$238.85 </span>
                                        <span th:text="'$'+${goodsA.price}" class="old-price">$245.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="添加到购物车" class="action-btn hover-up"
                                           th:href="@{/vm/front/shop/cart}"><i
                                                class="fi-rs-shopping-bag-add"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End product-grid-4-->
                </div>
                <!--En tab three (New added) 新增-->
                <div class="tab-pane fade" id="tab-three" role="tabpanel" aria-labelledby="tab-three">
                    <div class="row product-grid-4">
                        <div class="col-lg-3 col-md-4 col-12 col-sm-6" th:each="goodsA : ${goods.subList(3,11)}">
                            <div class="product-cart-wrap mb-30">
                                <div class="product-img-action-wrap">
                                    <div class="product-img product-img-zoom">
                                        <a th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">
                                            <img class="default-img" th:src="@{/assets/{url}(url=${goodsA.pic})}"
                                                 alt="主图">
                                            <img class="hover-img" th:src="@{/assets/{url}(url=${goodsA.pic1})}"
                                                 alt="副图">
                                        </a>
                                    </div>
                                    <!--                                    quick view-->
                                    <div class="product-action-1">
                                        <a aria-label="快速一览" class="action-btn hover-up quick-view-btn"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-eye"></i>
                                        </a>
                                        <a aria-label="添加到收藏" class="action-btn hover-up add-to-wi"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-heart"></i>
                                        </a>
                                        <a aria-label="查看同类" class="action-btn hover-up"
                                           th:href="@{/vm/front/shop/compare(catId=${goodsA.categoryId})}"><i
                                                class="fi-rs-shuffle"></i></a>
                                    </div>
                                    <div class="product-badges product-badges-position product-badges-mrg">
                                        <span class="new">New</span>
                                    </div>
                                </div>
                                <div class="product-content-wrap">
                                    <div class="product-category">
                                        <a th:text="${goodsA.category.name}"
                                           th:href="@{/vm/front/goods/grid}">Clothing</a>
                                    </div>
                                    <h2><a th:text="${goodsA.name}"
                                           th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">Colorful Shirts</a>
                                    </h2>
                                    <div class="rating-result" title="90%">
                                            <span>
                                                <span>90%</span>
                                            </span>
                                    </div>
                                    <div class="product-price">
                                        <span th:text="'$'+${goodsA.markPrice}">$238.85 </span>
                                        <span th:text="'$'+${goodsA.price}" class="old-price">$245.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a aria-label="添加到购物车" class="action-btn hover-up"
                                           th:href="@{/vm/front/shop/cart}"><i
                                                class="fi-rs-shopping-bag-add"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End product-grid-4-->
                </div>

            </div>
            <!--End tab-content-->
        </div>
    </section>
    <section class="banner-2 section-padding pb-0">
        <div class="container">
            <div class="banner-img banner-big wow fadeIn animated f-none">
                <img th:src="@{/assets/front/imgs/banner/banner-4.png}" alt="">
                <div class="banner-text d-md-block d-none">
                    <h4 class="mb-15 mt-40 text-brand">Repair Services</h4>
                    <h1 class="fw-600 mb-20">We're an Apple <br>Authorised Service Provider</h1>
                    <a th:href="@{/vm/front/goods/grid}" class="btn">Learn More <i class="fi-rs-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>
    <section class="popular-categories section-padding mt-15 mb-25">
        <div class="container wow fadeIn animated">
            <h3 class="section-title mb-20"><span>Popular</span> Categories</h3>
            <div class="carausel-6-columns-cover position-relative">
                <div class="slider-arrow slider-arrow-2 carausel-6-columns-arrow" id="carausel-6-columns-arrows"></div>
                <div class="carausel-6-columns" id="carausel-6-columns">
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-1.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">T-Shirt</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"> <img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-2.jpg}" alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Bags</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-3.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Sandan</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-4.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Scarf Cap</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-5.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Shoes</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-6.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Pillowcase</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-7.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Jumpsuits</a></h5>
                    </div>
                    <div class="card-1">
                        <figure class=" img-hover-scale overflow-hidden">
                            <a th:href="@{/vm/front/goods/grid}"><img
                                    th:src="@{/assets/front/imgs/shop/category-thumb-8.jpg}"
                                    alt=""></a>
                        </figure>
                        <h5><a th:href="@{/vm/front/goods/grid}">Hats</a></h5>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="banners mb-15">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="banner-img wow fadeIn animated">
                        <img th:src="@{/assets/front/imgs/banner/banner-1.png}" alt="">
                        <div class="banner-text">
                            <span>Smart Offer</span>
                            <h4>Save 20% on <br>Woman Bag</h4>
                            <a th:href="@{/vm/front/goods/grid}">购买 <i class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="banner-img wow fadeIn animated">
                        <img th:src="@{/assets/front/imgs/banner/banner-2.png}" alt="">
                        <div class="banner-text">
                            <span>Sale off</span>
                            <h4>Great Summer <br>Collection</h4>
                            <a th:href="@{/vm/front/goods/grid}">购买<i class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 d-md-none d-lg-flex">
                    <div class="banner-img wow fadeIn animated  mb-sm-0">
                        <img th:src="@{/assets/front/imgs/banner/banner-3.png}" alt="">
                        <div class="banner-text">
                            <span>New Arrivals</span>
                            <h4>Shop Today’s <br>Deals & Offers</h4>
                            <a th:href="@{/vm/front/goods/grid}">购买 <i class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-padding">
        <div class="container wow fadeIn animated">
            <h3 class="section-title mb-20"><span>New</span> Arrivals</h3>
            <div class="carausel-6-columns-cover position-relative">
                <div class="slider-arrow slider-arrow-2 carausel-6-columns-arrow"
                     id="carausel-6-columns-2-arrows"></div>
                <div class="carausel-6-columns carausel-arrow-center" id="carausel-6-columns-2">
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-2-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-2-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="hot">Hot</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Lorem ipsum dolor</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$238.85 </span>
                                <span class="old-price">$245.8</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-4-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-4-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="new">New</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Aliquam posuere</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$173.85 </span>
                                <span class="old-price">$185.8</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-15-1.jpg}"
                                         alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-15-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="sale">Sale</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Sed dapibus orci</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$215.85 </span>
                                <span class="old-price">$235.8</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-3-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-3-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="hot">.33%</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Donec congue</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$83.8 </span>
                                <span class="old-price">$125.2</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-9-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-9-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="hot">-25%</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Curabitur porta</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$1238.85 </span>
                                <span class="old-price">$1245.8</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-7-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-7-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                            <div class="product-badges product-badges-position product-badges-mrg">
                                <span class="new">New</span>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Praesent maximus</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$123 </span>
                                <span class="old-price">$156</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                    <div class="product-cart-wrap small hover-up">
                        <div class="product-img-action-wrap">
                            <div class="product-img product-img-zoom">
                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                    <img class="default-img" th:src="@{/assets/front/imgs/shop/product-1-1.jpg}" alt="">
                                    <img class="hover-img" th:src="@{/assets/front/imgs/shop/product-1-2.jpg}" alt="">
                                </a>
                            </div>
                            <div class="product-action-1">
                                <a aria-label="快速一览" class="action-btn small hover-up" data-bs-toggle="modal"
                                   data-bs-target="#quickViewModal">
                                    <i class="fi-rs-eye"></i></a>
                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/wishlist}" tabindex="0"><i class="fi-rs-heart"></i></a>
                                <a aria-label="查看同类" class="action-btn small hover-up"
                                   th:href="@{/vm/front/shop/compare}"
                                   tabindex="0"><i class="fi-rs-shuffle"></i></a>
                            </div>
                        </div>
                        <div class="product-content-wrap">
                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Vestibulum ante</a></h2>
                            <div class="rating-result" title="90%">
                                    <span>
                                    </span>
                            </div>
                            <div class="product-price">
                                <span>$238.85 </span>
                                <span class="old-price">$245.8</span>
                            </div>
                        </div>
                    </div>
                    <!--End product-cart-wrap-2-->
                </div>
            </div>
        </div>
    </section>
    <section class="deals section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 deal-co">
                    <div class="deal wow fadeIn animated mb-md-4 mb-sm-4 mb-lg-0">
                        <div class="deal-top">
                            <h2 class="text-brand">Deal of the Day</h2>
                            <h5>Limited quantities.</h5>
                        </div>
                        <div class="deal-content">
                            <h6 class="product-title"><a th:href="@{/vm/front/goods/detail?goodsId=1}">Summer Collection New
                                Morden
                                Design</a></h6>
                            <div class="product-price"><span class="new-price">$139.00</span><span class="old-price">$160.99</span>
                            </div>
                        </div>
                        <div class="deal-bottom">
                            <p>Hurry Up! Offer End In:</p>
                            <div class="deals-countdown" data-countdown="2025/03/25 00:00:00"></div>
                            <a th:href="@{/vm/front/goods/grid}" class="btn hover-up"> 购买<i
                                    class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 deal-co">
                    <div class="deal wow fadeIn animated">
                        <div class="deal-top">
                            <h2 class="text-brand">Men Clothing</h2>
                            <h5>Shirt & Bag</h5>
                        </div>
                        <div class="deal-content">
                            <h6 class="product-title"><a th:href="@{/vm/front/goods/detail?goodsId=1}">Try something new on
                                vacation</a></h6>
                            <div class="product-price"><span class="new-price">$178.00</span><span class="old-price">$256.99</span>
                            </div>
                        </div>
                        <div class="deal-bottom">
                            <p>Hurry Up! Offer End In:</p>
                            <div class="deals-countdown" data-countdown="2026/03/25 00:00:00"></div>
                            <a th:href="@{/vm/front/goods/grid}" class="btn hover-up">购买 <i
                                    class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-padding">
        <div class="container">
            <h3 class="section-title mb-20 wow fadeIn animated"><span>Featured</span> Brands</h3>
            <div class="carausel-6-columns-cover position-relative wow fadeIn animated">
                <div class="slider-arrow slider-arrow-2 carausel-6-columns-arrow"
                     id="carausel-6-columns-3-arrows"></div>
                <div class="carausel-6-columns text-center" id="carausel-6-columns-3">
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-1.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-2.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-3.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-4.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-5.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-6.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-3.png}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-grey-9 section-padding">
        <div class="container pt-25 pb-25">
            <div class="heading-tab d-flex">
                <div class="heading-tab-left wow fadeIn animated">
                    <h3 class="section-title mb-20"><span>Monthly</span> Best Sell</h3>
                </div>
                <div class="heading-tab-right wow fadeIn animated">
                    <ul class="nav nav-tabs right no-border" id="myTab-1" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav-tab-one-1" data-bs-toggle="tab"
                                    data-bs-target="#tab-one-1" type="button" role="tab" aria-controls="tab-one"
                                    aria-selected="true">Featured
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav-tab-two-1" data-bs-toggle="tab" data-bs-target="#tab-two-1"
                                    type="button" role="tab" aria-controls="tab-two" aria-selected="false">Popular
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav-tab-three-1" data-bs-toggle="tab"
                                    data-bs-target="#tab-three-1" type="button" role="tab" aria-controls="tab-three"
                                    aria-selected="false">New added
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 d-none d-lg-flex">
                    <div class="banner-img style-2 wow fadeIn animated">
                        <img th:src="@{/assets/front/imgs/banner/banner-9.jpg}" alt="">
                        <div class="banner-text">
                            <span>Woman Area</span>
                            <h4 class="mt-5">Save 17% on <br>Clothing</h4>
                            <a th:href="@{/vm/front/goods/grid}" class="text-white">购买 <i
                                    class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-12">
                    <div class="tab-content wow fadeIn animated" id="myTabContent-1">
                        <div class="tab-pane fade show active" id="tab-one-1" role="tabpanel"
                             aria-labelledby="tab-one-1">
                            <div class="carausel-4-columns-cover arrow-center position-relative">
                                <div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow"
                                     id="carausel-4-columns-arrows"></div>
                                <div class="carausel-4-columns carausel-arrow-center" id="carausel-4-columns">
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-1-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-1-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">Hot</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Nulla</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Maecenas eget</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-2-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-2-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="new">New</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Duis </a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Luctus suscipit</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$138.85 </span>
                                                <span class="old-price">$145.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-3-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-3-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="best">Best Sell</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Fusce </a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Aliquam ac</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$152.85 </span>
                                                <span class="old-price">$156.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-4-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-4-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">-12%</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Nunc </a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Fusce et ligula</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-11-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-11-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="sale">Sale</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Aliquam</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Morbi lacinia</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--End tab-pane-->
                        <div class="tab-pane fade" id="tab-two-1" role="tabpanel" aria-labelledby="tab-two-1">
                            <div class="carausel-4-columns-cover arrow-center position-relative">
                                <div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow"
                                     id="carausel-4-columns-2-arrows"></div>
                                <div class="carausel-4-columns carausel-arrow-center" id="carausel-4-columns-2">
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-6-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-6-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">Hot</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Cotton Leaf Printed 2</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-7-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-7-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="new">New</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Smart Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$138.85 </span>
                                                <span class="old-price">$145.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-5-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-5-1.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="best">Best Sell</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Hugy Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$152.85 </span>
                                                <span class="old-price">$156.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-10-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-10-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">-12%</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Smart Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-12-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-12-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="sale">Sale</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Cotton Leaf Printed</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-three-1" role="tabpanel" aria-labelledby="tab-three-1">
                            <div class="carausel-4-columns-cover arrow-center position-relative">
                                <div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow"
                                     id="carausel-4-columns-3-arrows"></div>
                                <div class="carausel-4-columns carausel-arrow-center" id="carausel-4-columns-3">
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-8-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-8-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">Hot</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Cotton Leaf Printed</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-13-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-13-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="new">New</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Smart Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$138.85 </span>
                                                <span class="old-price">$145.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-14-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-14-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="best">Best Sell</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Hugy Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$152.85 </span>
                                                <span class="old-price">$156.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-15-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-15-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="hot">-12%</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Smart Speaker</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-cart-wrap">
                                        <div class="product-img-action-wrap">
                                            <div class="product-img product-img-zoom">
                                                <a th:href="@{/vm/front/goods/detail?goodsId=1}">
                                                    <img class="default-img"
                                                         th:src="@{/assets/front/imgs/shop/product-11-1.jpg}" alt="">
                                                    <img class="hover-img"
                                                         th:src="@{/assets/front/imgs/shop/product-11-2.jpg}" alt="">
                                                </a>
                                            </div>
                                            <div class="product-action-1">
                                                <a aria-label="快速一览" class="action-btn small hover-up"
                                                   data-bs-toggle="modal" data-bs-target="#quickViewModal">
                                                    <i class="fi-rs-eye"></i></a>
                                                <a aria-label="添加到收藏" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/wishlist}"><i class="fi-rs-heart"></i></a>
                                                <a aria-label="查看同类" class="action-btn small hover-up"
                                                   th:href="@{/vm/front/shop/compare}"><i class="fi-rs-shuffle"></i></a>
                                            </div>
                                            <div class="product-badges product-badges-position product-badges-mrg">
                                                <span class="sale">Sale</span>
                                            </div>
                                        </div>
                                        <div class="product-content-wrap">
                                            <div class="product-category">
                                                <a th:href="@{/vm/front/goods/grid}">Watch</a>
                                            </div>
                                            <h2><a th:href="@{/vm/front/goods/detail?goodsId=1}">Cotton Leaf Printed</a></h2>
                                            <div class="rating-result" title="90%">
                                                    <span>
                                                        <span>70%</span>
                                                    </span>
                                            </div>
                                            <div class="product-price">
                                                <span>$238.85 </span>
                                                <span class="old-price">$245.8</span>
                                            </div>
                                            <div class="product-action-1 show">
                                                <a aria-label="添加到购物车" class="action-btn hover-up"
                                                   th:href="@{/vm/front/shop/cart}"><i
                                                        class="fi-rs-shopping-bag-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End tab-content-->
                </div>
                <!--End Col-lg-9-->
            </div>
        </div>
    </section>
</main>
<footer th:replace="~{front/include::footer}"></footer>
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>


</body>

</html>